<template>
  <div>
  </div>
</template>
<script>
import {Vector as VectorLayer} from "ol/layer";
import {Vector as VectorSource} from "ol/source";
import SourceVector from "ol/source/Vector";
import LayerVector from "ol/layer/Vector";
import GeoJSON from "ol/format/GeoJSON";
/*import {createBox} from "ol/interaction/Draw";*/
import Base64 from "@/libs/Base64"
/*import {createBox,createRegularPolygon,Draw} from "ol/interaction/Draw";*/
/* 画图 直线，园，多边形*/
import Draw, {
  createBox,
  createRegularPolygon,
} from 'ol/interaction/Draw.js';
import {polygonStyle,lineStyle} from './style';
import {unByKey} from 'ol/Observable';
import {Stroke, Style} from "ol/style";
import Polygon from 'ol/geom/Polygon.js';
import Feature from "ol/Feature";
import {Modify, Snap} from "ol/interaction";
export default {
  name: "PaintTools",
  props: {
/*    map: {
      type: Object,
    },
    source: {
      type: Object,
    },*/
  },
  data(){
    return{
      drawInteraction: null, //绘制图层对象
      drawLayers:[],
      drawTool:null,
      editor:{
        feature:null,
        modify:null,
        snap:null,
      },
      event:null,
      map:null,
      source:null
    }
  },
  methods:{
    /**
     * 清除
     */
    clear(){
      if (!this.map){
        return;
      }
      for(let i in this.drawLayers){
        //console.log("for i=%o,feature",i,this.drawLayers[i])
        this.source.removeFeature(this.drawLayers[i]);
      }
      this.drawLayers=[];
      this.editFeature=null;
    },

    /**
     * 编辑图图形
     */
    editPolygon(map,source,Coordinate){
      this.clear();
      this.map=map;
      this.source=source;

      this.editor.feature = new Feature(new Polygon(Coordinate));
      this.editor.feature.setStyle(() => {
        return new Style({
          stroke: new Stroke({
            color: "#e30c0c",
            lineDash: [7, 10],
            width: 2
          })
        })
      })

      this.source.addFeature(this.editor.feature);
      this.drawLayers.push(this.editor.feature);

      this.editor.modify = new Modify({
        source: this.source,
      });
      this.editor.snap = new Snap({
        source: this.source,
      });
      this.map.addInteraction(this.editor.modify);
      this.map.addInteraction(this.editor.snap);
    },

    /**
     * 新增结束
     */
    finishNew(){
      if (!this.map){
        return;
      }
      this.map.removeInteraction(this.drawTool);
      this.drawTool = null;
      this.drawInteraction = null;
      //me.tt.obj.helpTooltipElement.innerHTML="";
      if (this.event){unByKey(this.event)}
    },
    /**
     * 修改完成
     */
    finishEdit(){
      this.clear();
      this.map.removeInteraction(this.editor.modify);
      this.map.removeInteraction(this.editor.snap);
      let coordinate = this.editor.feature.getGeometry().getCoordinates();
      Object.setPrototypeOf(coordinate,null);
      //再转Base64
      let base64Str = btoa(JSON.stringify(coordinate));
      console.log("base64Str=%o",base64Str);
      this.$emit("after-edit-polygon",base64Str);
      this.editor.modify=null;
      this.editor.snap=null;
      this.editor.feature=null;
      return base64Str;
    },

    /**
     * 取得修改后的多边形边界
     */
    getEditPolygonCoordinate() {
      let coordinate = this.editor.feature.getGeometry().getCoordinates();
      Object.setPrototypeOf(coordinate,null);
      //再转Base64
      let base64Str = btoa(JSON.stringify(coordinate));
      //console.log("base64Str=%o",base64Str);
      //this.$emit("after-edit-polygon",base64Str);
      //this.editor.modify=null;
      //this.editor.snap=null;
      //this.editor.feature=null;
      return base64Str;
    },
    /**
     * 初始化地图
     */
    inits(map,source){
      this.map=map;
      this.source=source;
    },
    /**
     * 重绘多边形
     */
    reDrawPolygon(map,source,Coordinate){
      this.clear();
      this.map=map;
      this.source=source;
      const feature = new Feature(new Polygon(Coordinate));
      this.source.addFeature(feature);
      this.drawLayers.push(feature);
    },

    /**
     * 开始画图
     * @param type 'Circle','Polygon'
     */
    startDraw(map,source,drawType,endCallBack) {
      this.map=map;
      this.source=source;

      this.clear();
      const that = this;
      let value = null;
      let style = lineStyle;
      let geometryFunction=null;
      this.drawTool = null;
      if (drawType === 'Square' ){
        //正方形
        value = 'Circle';
        geometryFunction = createRegularPolygon(4);
      }else if (drawType === 'Box' ){
        //矩形
        value = 'Circle';
        geometryFunction = createBox();
      }else if (drawType === 'Star' ){
        value = 'Circle';
        geometryFunction = function (coordinates, geometry) {
          const center = coordinates[0];
          const last = coordinates[coordinates.length - 1];
          const dx = center[0] - last[0];
          const dy = center[1] - last[1];
          const radius = Math.sqrt(dx * dx + dy * dy);
          const rotation = Math.atan2(dy, dx);
          const newCoordinates = [];
          const numPoints = 12;
          for (let i = 0; i < numPoints; ++i) {
            const angle = rotation + (i * 2 * Math.PI) / numPoints;
            const fraction = i % 2 === 0 ? 1 : 0.5;
            const offsetX = radius * fraction * Math.cos(angle);
            const offsetY = radius * fraction * Math.sin(angle);
            newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
          }
          newCoordinates.push(newCoordinates[0].slice());
          if (!geometry) {
            geometry = new Polygon([newCoordinates]);
          } else {
            geometry.setCoordinates([newCoordinates]);
          }
          return geometry;
        };
      }else if (drawType === 'Circle' ){
        value = 'Circle';
        style = lineStyle;
      }else if (drawType === 'Polygon' ){
        value = 'Polygon';
        style = polygonStyle;
      }else if (drawType === 'Line') {
        value = 'LineString';
        style = lineStyle;
      }

/*      if (type == 'Polygon') {
        style = polygonStyle;
      } else if (type == 'Circle') {
        style = lineStyle;
      } else if (type == 'LineString') {
        style = lineStyle;
      }*/

      if (!!geometryFunction){
        this.drawTool = new Draw({
          type: value,
          source: this.source,
          style: style,
          geometryFunction: geometryFunction
        });
      }else{
        this.drawTool = new Draw({
          type: value,
          source: this.source,
          style: style,
        });
      }

      this.map.addInteraction(this.drawTool);
      this.drawTool.on('drawend', function (event) {
        //console.log(">>>>>>> PaintTools.drawend: event=%o", event);
        event.feature.setStyle(style);
        event.feature.type = value;
        event.feature.type_id = value;
        that.drawLayers.push(event.feature);
        //console.log(">>>>>>> PaintTools.drawend: event.feature=%o", event.feature);
        const feature = event.feature;
        //const geometry = feature.getGeometry();
        //回调返回
        endCallBack && endCallBack(feature);
        //console.log(">>>>>>> PaintTools.drawend: geometry=%o", geometry);
        //坐标点数据[ [经度,纬度],[经度,纬度],.... ]
        //const coordinate = geometry.getCoordinates();

        //console.log(">>>>>>> PaintTools.drawend: coordinate=%o", coordinate);
        //console.log(">>>>>>>>> PaintTools.start 能不能删除刚画的图？");

        //that.source.removeFeature(feature);
        //console.log(">>>>>>>> PaintTools.start: %o",this.source.getFeatureById(value));

        // 输出画的几何图 geometry
        //that.$emit('after-draw', event.feature.getGeometry());

        /*      that.drawTool.source.getFeatures().forEach(function(ele, index) {
                if (ele.type == 'Polygon'){
                  //fence_data.push(ele.getGeometry().getCoordinates());
                  console.log("%o",ele.getGeometry().getCoordinates());
                }
              });*/


        that.event = event;

        that.finishNew();

      });
    },

/*    layerStyle() {
      return new Style({
        stroke: new Stroke({
          color: "red",
          width: 3,
          lineDash: [4, 8],
        }),
      });
    },*/
  }

}
</script>


<!--class PaintTools{
  constructor(map) {
    this.map=null;
    this.source=null; //对应me.all_obj.monitor.data_c

    this.drawTool=null;

    this.event=null;

    //画的顶点
    this.drawpoints=[];
  }

  setMap(map){this.map=map;}
  setSource(source){this.source=source;}


    //click,,singleclick
    //let dbclickEvent = me.map.on('dblclick', function(evt) {
    //    me.fence_draw_end(dbclickEvent);
    //});
  }

  finish=()=>{
    this.map.removeInteraction(this.drawTool);
    this.drawTool = null;
    //me.tt.obj.helpTooltipElement.innerHTML="";
    if (this.event){unByKey(this.event)}
  }
}

export default PaintTools;-->
